﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="../lib/layui/css/layui.css">
	<link rel="stylesheet" href="../lib/layui/css/layui.mobile.css">
	<link rel="stylesheet" href="../styles/css/index.css">
	<script src="../lib/layui/layui.js"></script>
	<script src="../lib/JQuery.js"></script>
	<script src="../js/index.js"></script>
	<style>
		.layui-form-label {
			width: 100px;
		}

		#popSearchRoleTest .layui-form-label {
			width: 80px;
		}

		.layui-form-item .box {
			width: 250px;
		}

		#popSearchRoleTest {
			display: none;
		}

		.txt {
			color: red;
		}
		.layui-laypage-limits select{
			line-height: 20px;
			height: 26px;
		}
	</style>
</head>

<body>
<div class="content">
	<div class="headTitle">
		统计分析
	</div>
	<form class="layui-form" action="">
		<div class="layui-row">
			<div class="layui-col-md8">
				<div class="layui-form-item">
					<label class="layui-form-label">选择开始时间</label>
					<div class="layui-input-inline box">
						<input type="text" class="layui-input" id="test1">
					</div>
					<div class="layui-form-mid layui-word-aux">请选择想要分析的时间段，选择时间段内的分析统计</div>
				</div>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-col-md8">
				<div class="layui-form-item">
					<label class="layui-form-label">选择结束时间</label>
					<div class="layui-input-inline box">
						<input type="text" class="layui-input" id="test2">
					</div>
					<div class="layui-form-mid layui-word-aux">请选择想要分析的时间段，选择时间段内的分析统计</div>
				</div>
			</div>
		</div>
		<div class="layui-row">
			<label class="layui-form-label" style="text-align: left;padding-left: 30px;width: 85px;">选择地块</label>
			<button type="button" onclick="handleClick()" class="layui-btn layui-btn-sm">选取</button>
		</div>
		<div class="layui-row" style="margin-top: 7px;">
			<div style="display: inline-block;margin-left: 30px;">选择结果</div>
			<span
					style="border: 1px solid #000;height: 38px;text-align: center;line-height: 38px;display: inline-block;padding: 0 15px;margin-left: 40px;">
          地块1
        </span>
		</div>
		<div class="layui-row" style="margin-top: 12px;">
			<div class="layui-col-md12">
				<div class="layui-form-item">
					<label class="layui-form-label" style="text-align: left;padding: 9px 0px 0 30px;">分析项目</label>
					<button type="button" class="layui-btn layui-btn-sm"
							style="display: inline-block;float: left;margin-top: 4px;">确认
					</button>
					<div class="layui-col-md10" style="padding-left: 20px;">
						<div class="layui-input-inline" style="width: 100%;">
							<input type="checkbox" name="like[write]" title="写作">
							<input type="checkbox" name="like[read]" title="阅读" checked>
							<input type="checkbox" name="like[dai]" title="发呆">
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
	<div class="charts">
		<div class="layui-row">
			<div id="chartmain" style="height: 342px;width: 100%;"></div>
		</div>
	</div>
</div>
<div id="popSearchRoleTest">
	<div class="layui-row" style="color: #fff; height: 40px;background:#009688;text-align: center;line-height: 40px;">
		地块筛选
	</div>
	<div class="layui-row" style="margin-top: 10px;">
		<form action="" class="layui-form">
			<div class="layui-col-md3">
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="txt">*</i>采集方式</label>
					<div class="layui-input-block">
						<select name="city5" lay-verify="required">
							<option value="">普通</option>
							<option value="1">农场B</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="txt">*</i>采集方式</label>
					<div class="layui-input-block">
						<select name="city6" lay-verify="required">
							<option value="">普通</option>
							<option value="1">农场B</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="txt">*</i>采集方式</label>
					<div class="layui-input-block">
						<select name="city7" lay-verify="required">
							<option value="">普通</option>
							<option value="1">农场B</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-col-md3" style="text-align: center;">
				<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
				<button class="layui-btn layui-btn-primary">重置</button>
				<button class="layui-btn layui-btn-primary">确认</button>
			</div>
		</form>
	</div>
	<div class="layui-row">
		<div class="padding20">
			<table id="demoTable" lay-filter="test" style="width: 100%;"></table>
		</div>

	</div>
</div>
</body>

</html>
<script src="../lib/echarts.js"></script>
<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#test2' //指定元素
        });
       /* var form = layui.form;
        var table = layui.table;
//生成表单
        table.render({
            elem: '#demoTable',
            //					height: 315
            //  ,url: '/demo/table/user/' //数据接口
            //						,
            page: false //开启分页
            ,
            cols: [
                [ //表头
                    {
                        type: 'checkbox',
                        width: '5%'
                    },
                    {
                        field: 'id',
                        title: '序号',
                        sort: true,
                        width: '10%',
                        align: 'center',
                    }, {
                    field: 'username',
                    title: '地块名称',
                    width: '20%',
                    align: 'center',
                }, {
                    field: 'sex',
                    title: '地块类型',
                    width: '20%',
                    align: 'center',
                    sort: true
                }, {
                    field: 'dklx',
                    title: '所属管理区',
                    width: '25%',
                    align: 'center',
                    sort: true
                }, {
                    field: 'city',
                    title: '登记时间',
                    width: '20%',
                    align: 'center',
                }
                ]
            ],
            data: [{ // 表格数据
                "id": "10001",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116",
                "ip": "192.168.0.8",
                "logins": "108",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10002",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14",
            }, {
                "id": "10003",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "65",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10004",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "666",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10005",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "86",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10006",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10007",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }, {
                "id": "10008",
                "username": "地块",
                "email": "xianxin@layui.com",
                "sex": "男",
                "dklx": "水田",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106",
                "ip": "192.168.0.8",
                "logins": "106",
                "area": "价目是",
                "shzt": "2016-10-14"
            }]
        });
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });*/
    });
    //echarts
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['地块1', '地块2', '地块3', '地块4', '地块5'],
            x: 'right'
        },
        toolbox: {
            show:false,
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6', '地块7']
        }],
        yAxis: [{
            type: "value",
            scale: !0,
            splitArea: {//背景条纹
                show: true,
                areaStyle: {
                    color: [
                        'rgba(255,255,255,0)',
                        'rgba(242,243,248,1)'
                    ]
                }
            }
        }],
        series: [
            {
                name: '地块1',
                type: 'line',
                stack: '总量',
                smooth: true,
                showSymbol: !1,
                data: [120, 132, 101, 134, 90, 230, 210,]
            },
            {
                name: '地块2',
                type: 'line',
                stack: '总量',
                smooth: true,
                showSymbol: !1,
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '地块3',
                type: 'line',
                stack: '总量',
                showSymbol: !1,
                smooth: true,
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '地块4',
                type: 'line',
                stack: '总量',
                smooth: true,
                showSymbol: !1,
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '地块5',
                type: 'line',
                stack: '总量',
                showSymbol: !1,
                smooth: true,
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('chartmain'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    function handleClick() {
        layer.open({
            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
            type: 1,
            title: false,
            area: ['80%', '70%'],
            content: $("#popSearchRoleTest"),
            success: function (layero, index) {
                layui.use(['form', 'table'], function () {
                    //生成表单
                    var form = layui.form;
                    var table = layui.table;
                    table.render({
                        elem: '#demoTable',
                        //					height: 315
                        //  ,url: '/demo/table/user/' //数据接口
                        //						,
                        page: true //开启分页
                        ,
                        cols: [
                            [ //表头
                                {
                                    type: 'checkbox',
                                    width: '5%'
                                },
                                {
                                    field: 'id',
                                    title: '序号',
                                    width: '10%',
                                    align: 'center',
                                }, {
                                field: 'username',
                                title: '地块名称',
                                width: '20%',
                                align: 'center',
                            }, {
                                field: 'sex',
                                title: '地块类型',
                                width: '20%',
                                align: 'center'
                            }, {
                                field: 'dklx',
                                title: '所属管理区',
                                width: '25%',
                                align: 'center'
                            }, {
                                field: 'city',
                                title: '登记时间',
                                width: '20%',
                                align: 'center',
                            }
                            ]
                        ],
                        data: [
                            { // 表格数据
                            "id": "10001",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "116",
                            "ip": "192.168.0.8",
                            "logins": "108",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }, {
                            "id": "10002",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "12",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14",
                        }, {
                            "id": "10003",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "65",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }, {
                            "id": "10004",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "666",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }, {
                            "id": "10005",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "86",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }, {
                            "id": "10006",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "12",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }, {
                            "id": "10007",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "16",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }, {
                            "id": "10008",
                            "username": "地块",
                            "email": "xianxin@layui.com",
                            "sex": "男",
                            "dklx": "水田",
                            "city": "浙江杭州",
                            "sign": "人生恰似一场修行",
                            "experience": "106",
                            "ip": "192.168.0.8",
                            "logins": "106",
                            "area": "价目是",
                            "shzt": "2016-10-14"
                        }]
                    });
                    form.on('submit(formDemo)', function (data) {
                        layer.msg(JSON.stringify(data.field));
                        return false;
                    });
                });
            }
        });
    }
</script>